Ext.ns('App', 'App.document');

/**
 * App.document.Detail
 * @extends Ext.Panel
 * This is a specialized Panel which is used to show information about
 * a document.
 *
 * This demonstrates adding 2 custom properties (tplMarkup and
 * startingMarkup) to the class. It also overrides the initComponent
 * method and adds a new method called updateDetail.
 *
 * The class will be registered with an xtype of 'bookdetail'
 */
App.document.Detail = Ext.extend(Ext.Panel, {
	autoScroll: true,
	// add tplMarkup as a new property
	tplMarkup: [
	],
	// startingMarup as a new property
	startingMarkup: '<i>Seleccione un documento para ver m&aacute;s informaci&oacute;n...</i>',
	// override initComponent to create and compile the template
	// apply styles to the body of the panel and initialize
	// html to startingMarkup
	initComponent: function() {
		this.tpl = new Ext.XTemplate(this.tplMarkup);
		Ext.apply(this, {
			bodyStyle: {
				background: '#fefefe',
				padding: '7px',
				border: 'none'
			},
			html: this.startingMarkup
		});
		// call the superclass's initComponent implementation
		App.document.Detail.superclass.initComponent.call(this);
	},
	// add a method which updates the details
	updateDetail: function(data) {
		this.tpl.overwrite(this.body, data);
	},
	
	setTplMarkup: function(newTplMarkup) {
		this.tplMarkup = newTplMarkup;
		this.tpl = new Ext.XTemplate(this.tplMarkup);
	}
});
// register the App.document.Detail class with an xtype of documentdetail
Ext.reg('documentdetail', App.document.Detail);